<template>
  <view class="wifi-select-container">
    <view class="wifi-header">
      <text class="header-title">选择WiFi网络</text>
      <text class="skip-btn" @click="skipWifi">跳过</text>
    </view>
    
    <view class="scanning-section">
      <view class="wifi-scan-chart">
        <view class="chart-circle">
          <uni-icons type="wifi" size="60" color="#007AFF" class="center-icon"></uni-icons>
          <view class="scan-ring" :class="{ 'scanning': scanning }"></view>
          <view class="signal-ring signal-1"></view>
          <view class="signal-ring signal-2"></view>
          <view class="signal-ring signal-3"></view>
        </view>
      </view>
      <text class="scanning-text">正在扫描附近的WiFi网络...</text>
    </view>
    
    <view class="wifi-list-section">
      <view class="wifi-list-header">
        <text class="list-title">可用网络</text>
        <text class="refresh-text" @click="refreshWifiList">
          <uni-icons type="refresh" size="20" color="#007AFF"></uni-icons>
          刷新
        </text>
      </view>
      
      <uni-list class="wifi-list">
        <uni-list-item 
          v-for="(wifi, index) in wifiList" 
          :key="index"
          :title="wifi.name"
          :note="wifi.security ? '已加密' : '开放网络'"
          :show-arrow="true"
          @tap="connectWifi(wifi)"
          :class="{ 'connected': wifi.connected }"
        >
          <view class="wifi-signal-container" slot="header">
            <view class="signal-bars">
              <view 
                v-for="n in 4" 
                :key="n" 
                class="signal-bar"
                :class="{ 
                  'active': n <= wifi.strength, 
                  'connected': wifi.connected && n <= wifi.strength 
                }"
              ></view>
            </view>
          </view>
        </uni-list-item>
      </uni-list>
    </view>
    
    <!-- WiFi连接弹窗 -->
    <uni-popup ref="connectPopup" type="bottom" :animation="false">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{selectedWifi ? selectedWifi.name : ''}}</text>
          <text class="popup-close" @tap="closePopup">×</text>
        </view>
        <view v-if="selectedWifi && selectedWifi.security" class="password-input">
          <text class="input-label">密码</text>
          <input 
            v-model="wifiPassword" 
            type="password" 
            placeholder="请输入WiFi密码" 
            confirm-type="done"
            @confirm="confirmConnect"
          />
        </view>
        <button 
          class="connect-btn" 
          type="primary" 
          @tap="confirmConnect"
          :loading="connecting"
        >
          {{connectText}}
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        wifiList: [
          {
            id: '1',
            name: 'RuoYi-Office',
            strength: 4,
            security: true,
            connected: false,
            icon: 'wifi'
          },
          {
            id: '2',
            name: 'ChinaNet-ABC',
            strength: 3,
            security: true,
            connected: false,
            icon: 'wifi'
          },
          {
            id: '3',
            name: 'TP-LINK_8888',
            strength: 2,
            security: true,
            connected: false,
            icon: 'wifi'
          },
          {
            id: '4',
            name: 'Guest-Free-WiFi',
            strength: 4,
            security: false,
            connected: false,
            icon: 'wifi'
          },
          {
            id: '5',
            name: 'MERCURY_5G',
            strength: 1,
            security: true,
            connected: false,
            icon: 'wifi'
          }
        ],
        selectedWifi: null,
        wifiPassword: '',
        connecting: false,
        scanning: true,
        scanningTimer: null,
      }
    },
    computed: {
      connectText() {
        return this.connecting ? '连接中...' : (this.selectedWifi?.security ? '连接' : '加入网络')
      }
    },
    onLoad() {
      this.startScanning()
    },
    onUnload() {
      if (this.scanningTimer) {
        clearTimeout(this.scanningTimer)
      }
    },
    methods: {
      startScanning() {
        // 模拟扫描过程
        this.scanning = true
        
        // 3秒后显示扫描结果
        this.scanningTimer = setTimeout(() => {
          this.scanning = false
        }, 3000)
      },
      skipWifi() {
        // 跳过WiFi连接，直接进入工作台
        uni.switchTab({
          url: '/pages/work/index'
        })
      },
      refreshWifiList() {
        // 刷新WiFi列表
        this.scanning = true
        
        setTimeout(() => {
          // 随机调整WiFi信号强度模拟刷新效果
          this.wifiList = this.wifiList.map(wifi => ({
            ...wifi,
            strength: Math.floor(Math.random() * 4) + 1
          })).sort((a, b) => b.strength - a.strength)
          
          this.scanning = false
        }, 1500)
      },
      connectWifi(wifi) {
        this.selectedWifi = wifi
        this.wifiPassword = ''
        
        if (wifi.security) {
          // 需要密码，显示密码输入弹窗
          this.$refs.connectPopup.open()
        } else {
          // 开放网络，直接连接
          this.confirmConnect()
        }
      },
      confirmConnect() {
        if (this.selectedWifi?.security && !this.wifiPassword) {
          uni.showToast({
            title: '请输入密码',
            icon: 'none'
          })
          return
        }
        
        this.connecting = true
        
        // 模拟连接过程
        setTimeout(() => {
          // 更新连接状态
          this.wifiList.forEach(wifi => {
            wifi.connected = wifi.id === this.selectedWifi.id
          })
          
          this.closePopup()
          this.connecting = false
          
          uni.showToast({
            title: '连接成功',
            icon: 'success'
          })
          
          // 连接成功后跳转到工作台
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/work/index'
            })
          }, 1000)
        }, 2000)
      },
      closePopup() {
        this.$refs.connectPopup.close()
      }
    }
  }
</script>

<style scoped>
  .wifi-select-container {
    padding: 20rpx 30rpx;
    min-height: 100vh;
    background-color: #f8f8f8;
  }
  
  .wifi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    margin-bottom: 40rpx;
  }
  
  .header-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
  
  .skip-btn {
    font-size: 28rpx;
    color: #007AFF;
  }
  
  .wifi-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;
  }
  
  .wifi-image {
    width: 300rpx;
    height: 300rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
  
  .wifi-icon-container {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
    background-color: #f0f8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 20rpx;
  }
  
  .illustration-text {
    font-size: 28rpx;
    color: #666;
  }
  
  .scanning-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
  }
  
  .wifi-scan-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .chart-circle {
    position: relative;
    width: 180rpx;
    height: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .center-icon {
    position: relative;
    z-index: 4;
  }
  
  .scan-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3rpx solid transparent;
    border-top-color: #007AFF;
    z-index: 3;
  }
  
  .scan-ring.scanning {
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .signal-ring {
    position: absolute;
    border-radius: 50%;
    border: 2rpx solid #007AFF;
    opacity: 0.6;
  }
  
  .signal-ring.signal-1 {
    width: 60%;
    height: 60%;
    z-index: 1;
  }
  
  .signal-ring.signal-2 {
    width: 80%;
    height: 80%;
    z-index: 2;
    animation: pulse 3s infinite ease-in-out;
  }
  
  .signal-ring.signal-3 {
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: pulse 4s infinite ease-in-out 0.5s;
  }
  
  @keyframes pulse {
    0%, 100% { 
      transform: scale(1); 
      opacity: 0.6;
    }
    50% { 
      transform: scale(1.05); 
      opacity: 0.3;
    }
  }
  
  .scanning-text {
    font-size: 26rpx;
    color: #999;
  }
  
  .wifi-list-section {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  
  .wifi-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .list-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }
  
  .refresh-text {
    font-size: 26rpx;
    color: #007AFF;
    display: flex;
    align-items: center;
  }
  
  .refresh-text uni-icons {
    margin-right: 5rpx;
  }
  
  .wifi-list {
    margin-bottom: 20rpx;
  }
  
  .uni-list-item {
    margin-bottom: 10rpx;
    border-radius: 10rpx;
    overflow: hidden;
  }
  
  .uni-list-item.connected {
    background-color: #f0f8ff;
  }
  
  .wifi-signal-container {
    display: flex;
    align-items: center;
  }
  
  .signal-bars {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 40rpx;
    padding: 5rpx;
  }
  
  .signal-bar {
    width: 10rpx;
    background-color: #ddd;
    margin-bottom: 3rpx;
    border-radius: 2rpx;
  }
  
  .signal-bar:nth-child(1) { height: 20rpx; }
  .signal-bar:nth-child(2) { height: 15rpx; }
  .signal-bar:nth-child(3) { height: 10rpx; }
  .signal-bar:nth-child(4) { height: 5rpx; }
  
  .signal-bar.active {
    background-color: #999;
  }
  
  .signal-bar.connected {
    background-color: #007AFF;
  }
  
  /* 弹窗样式 */
  .popup-content {
    padding: 20rpx;
  }
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding-bottom: 15rpx;
    border-bottom: 1px solid #eee;
  }
  
  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .popup-close {
    font-size: 40rpx;
    color: #999;
    padding: 0 10rpx;
  }
  
  .password-input {
    margin-bottom: 30rpx;
  }
  
  .input-label {
    display: block;
    font-size: 28rpx;
    margin-bottom: 10rpx;
    color: #333;
  }
  
  .password-input input {
    width: 100%;
    height: 80rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 30rpx;
    box-sizing: border-box;
  }
  
  .connect-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
  }
</style>